import React, {useEffect, useState} from 'react';
import {DatePicker, Space, Select, Button, Table, Pagination, Breadcrumb, Form, Input, Modal, Row, Col} from 'antd';
import "./index.css"
import PaginationBar from "../../components/paginationbar";
import common from "../../common";

const {Option} = Select;
const {RangePicker} = DatePicker;

function DataReport(props) {

    let [dataList, setDataList] = useState([])
    let [search, setSearch] = useState({})       // 搜索内容
    let [query, setQuery] = useState({});
    const [searchForm] = Form.useForm();
    let [editModalVisible, setEditModalVisible] = useState(false)
    let [pagination, setPagination] = useState({
        total: 10,
        page: 1,
        limit: 10,
    })

    let [editForm] = Form.useForm();

    const columns = [
        {
            title: '按钮盒',
            dataIndex: 'name',
            key: 'name',
            render: text => <a>{text}</a>,
        },
        {
            title: '开始时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
        },
        {
            title: '响应时长（分钟）',
            dataIndex: 'responseTime',
            key: 'responseTime',
        },
        {
            title: '处理时长（分钟）',
            dataIndex: 'completeTime',
            key: 'completeTime',
        },
        {
            title: '报警类型',
            dataIndex: 'eventName',
            key: 'eventName',
        },
        {
            title: '处理人',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '产线',
            dataIndex: 'lineName',
            key: 'lineName',
        },
        {
            title: '车间',
            dataIndex: 'workshopName',
            key: 'workshopName',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <>
                    <Button type="link" onClick={() => {
                        setEditModalVisible(true)
                        editForm.setFieldsValue(record)
                    }}>编辑</Button>
                </>
            ),
        },
    ];

    //获取负责人
    let [users, setUsers] = useState([]);
    const getUsers = () => {
        common.ajax("GET", "/passport/user/list?limit=100").then(data => {
            setUsers(data.list)
        })
    }

    let [lines, setLines] = useState([]);
    //获取产线
    const getLines = () => {
        common.ajax("GET", "/front/line/list?limit=100").then(data => {
            setLines(data.list)
        })
    }
    let [workshops, setWorkshops] = useState([]);
    //获取车间
    const getWorkshops = () => {
        common.ajax("GET", "/front/workshop/list?limit=100").then(data => {
            setWorkshops(data.list)
        })
    }
    let [events, setEvents] = useState([]);
    //获取报警类型
    const getEvents = () => {
        common.ajax("GET", "/front/event/list?limit=100").then(data => {
            setEvents(data.list)
        })
    }

    // 获取事件列表
    const getDataReports = () => {
        let params = {
            ...search,
            page: pagination.page,
            limit: pagination.limit,
        }
        console.log(search)
        common.ajax("GET", "/front/incident/list", params).then(data => {
            setDataList(data.list)
            setPagination(data.pagination)
        })
    }

    const update = (data) => {
        common.loadingStart()
        common.ajax("POST", "/front/incident/update", data).then(res => {
            common.toast("操作成功")
            setEditModalVisible(false)
            getDataReports()
        }).finally(common.loadingStop)
    }

    useEffect(() => {
        getDataReports()
        getLines()
        getWorkshops()
        getEvents()
        getUsers()
    }, [pagination.page, pagination.limit, search])


    return (
        <div>
            <Breadcrumb>
                <Breadcrumb.Item>报表查询</Breadcrumb.Item>
                <Breadcrumb.Item>数据报表</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
                <Form form={searchForm} style={{marginTop: 15}}>
                    <Row gutter={24}>
                        <Col span={6}>
                            <Form.Item label="车间" name="workshopId">
                                <Select placeholder="车间名称" onChange={(value) => {
                                    setQuery({...query, workshopId: value})
                                }}>
                                    {workshops.map(item => {
                                        return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item label="产线" name="lineId">
                                <Select placeholder="产线名称" onChange={(value) => {
                                    setQuery({...query, lineId: value})
                                }}>
                                    {lines.map(item => {
                                        return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item label="报警种类" name="eventId">
                                <Select placeholder="产线名称" onChange={(value) => {
                                    setQuery({...query, eventId: value})
                                }}>
                                    {events.map(item => {
                                        return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item>
                                <Space>
                                    <Button onClick={() => {
                                        setSearch(query)
                                    }}>搜索</Button>
                                    <Button onClick={() => {
                                        let emptySearch = {
                                            eventId: '',
                                            lineId: '',
                                            workshopId: '',

                                        }
                                        searchForm.setFieldsValue(emptySearch)
                                        emptySearch = {}
                                        setSearch(emptySearch)
                                        setQuery(emptySearch)
                                    }}>清空</Button>
                                </Space>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>

                <div className="dataReport">
                    <Table rowKey={columns => columns.id} columns={columns} dataSource={dataList} pagination={false}/>
                    {pagination.total < 5 ? '' :
                        <PaginationBar>
                            <Pagination
                                style={{marginTop: 25}}
                                pageSizeOptions={['10', '20', '50', '100']}
                                onChange={(page, limit) => {
                                    setPagination({...pagination, page, limit})
                                }}
                                onShowSizeChange={(page, limit) => {
                                    setPagination({...pagination, page, limit})
                                }}
                                showTotal={total => `共${total}条`}
                                total={pagination.total}
                                defaultCurrent={pagination.page}
                                current={pagination.page}
                                defaultPageSize={pagination.limit}
                                showSizeChanger
                                showQuickJumper/>
                        </PaginationBar>}
                </div>

                <Modal title="编辑" footer={false} maskClosable={false} destroyOnClose={true} visible={editModalVisible}
                       onCancel={() => {
                           setEditModalVisible(false)
                       }}
                >
                    <Form
                        labelCol={{span: 8}}
                        wrapperCol={{span: 16}}
                        form={editForm}
                        onFinish={(values) => {
                            update(values)
                        }}
                    >
                        <Form.Item
                            hidden={true}
                            name="id"
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item label="盒子名称" name="name">
                            <Input disabled={true}/>
                        </Form.Item>

                        <Form.Item label="解决方案" name="solution">
                            <Input/>
                        </Form.Item>

                        <Form.Item name="eventId"
                                   label="报警类型">
                            <Select placeholder="报警类型" disabled={true}>
                                {events.map(item => {
                                    return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item name="lineId"
                                   label="所属产线">
                            <Select placeholder="所属产线" disabled={true}>
                                {lines.map(item => {
                                    return (<Option key={"lines" + item.id} value={item.id}> {item.name}</Option>)
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item name="workshopId"
                                   label="所属车间">
                            <Select placeholder="所属车间" disabled={true}>
                                {workshops.map(item => {
                                    return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item name="userId"
                                   label="处理人">
                            <Select placeholder="处理人">
                                {users.map(item => {
                                    return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item wrapperCol={{offset: 8, span: 16}}>
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </div>
    );

}

export default DataReport;